<template>
    <div class="app-container" v-loading="handlePermissionStatus.loading">
      <el-row :gutter="20">
        <el-col :span="8" style="border-right: 1px solid #ededed; min-height: 500px;">
          <el-tree
            ref="tree"
            :data="permissionTreeNode"
            :props="defaultProps"
            node-key="id"
            default-expand-all="true"
            highlight-current
            v-loading="handlePermissionStatus.treeLoading"
            :expand-on-click-node="false"
            :check-on-click-node="true">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="handleCreate(node, data)">
                  新增子权限
                </el-button>
                <el-button
                  type="text"
                  v-show="data.id != 0"
                  size="mini"
                  @click="handleUpdate(node, data)">
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-show="data.id != 0"
                  @click="handleDelete(node, data)">
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="16" v-show="handlePermissionStatus.show">
          <el-alert
            :title="optionFlag === 'update' ? '更新' : '新增'"
            type="success"
            :closable="false" style="margin-bottom: 10px">
          </el-alert>
          <el-form ref="dataForm" :rules="rules" :model="tempData" label-position="right" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="所属系统" prop="systemId">
                  <el-input v-model="tempData.systemId" placeholder="请输入所属系统" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上级权限" prop="parentId">
                  <el-input v-model="tempData.parentName"  aria-readonly="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权限名称" prop="permissionName">
                  <el-input v-model="tempData.permissionName" placeholder="请输入权限名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权限编码" prop="permissionCode">
                  <el-input v-model="tempData.permissionCode" placeholder="请输入权限编码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权限图标" prop="icon">
                  <el-input v-model="tempData.icon" placeholder="请输入权限图标" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="访问地址" prop="url">
                  <el-input v-model="tempData.url" placeholder="请输入权限对应的路径" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型" prop="type">
                  <el-input v-model="tempData.type" placeholder="请输入类型(1:菜单,2:按钮)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                  <el-input-number v-model="tempData.sort" :min="0" label="请输入排序"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注" prop="description">
                  <el-input type="textarea" v-model="tempData.description"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="12">
                <el-form-item>
                  <el-button type="primary" @click="optionFlag === 'update' ? updateData() : (optionFlag === 'add' ? createData() : null)">保存</el-button>
                  <el-button @click="handlePermissionStatus.show = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>

</template>


<script>

    import { listUpmsPermission, addUpmsPermission, editUpmsPermission, delUpmsPermission, treePermission, getUpmsPermission } from '@/api/upms/permission/index'
    import waves from '@/directive/waves' // waves directive
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination
    import { Message } from 'element-ui'

    export default {
        name: "index.vue"
      , components: { Pagination }
      ,  directives: { waves }
      , data() {
        return {
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          handlePermissionStatus:{
            show:false,
            loading:false,
            treeLoading:false
          },
          permissionTreeNode:[
            {
              id:0,
              label:"所有权限",
              children:[]
            }
          ],
          total: 0,
          tableHeight: window.innerHeight - 205,
          tableData: null,
          listLoading: true,
          optionFlag: null,
          listQuery: {
            page: 1,
            limit: 20,
            condition: {
                systemId:null,
                permissionName:null,
                permissionCode:null,
                parentId:null,
                icon:null,
                url:null,
                type:null,
                description:null,
                valid:null,
                deleted:null,
                version:null,
                sort:null,
                createTime:null,
                updateTime:null,
                createUser:null,
                updateUser:null,
            }
          },
          dialogFormVisible:false, // 是否显示模态框
          rules: {
            permissionName: [{ required: true, message: '权限名称不能为空', trigger: 'change' }],
            permissionCode: [{ required: true, message: '权限编码不能为空', trigger: 'change' }],
          },
          tempData:{
            systemId:null,
            permissionName:null,
            permissionCode:null,
            parentId:null,
            parentName:"",
            icon:null,
            url:null,
            type:null,
            description:null,
            valid:null,
            deleted:null,
            version:null,
            sort:null,
            createTime:null,
            updateTime:null,
            createUser:null,
            updateUser:null,
          }
        }
      }
      , created() {
        this.getList()
      }
      , methods : {
        handleFilter() {
          this.getList();
        }
        , handleCreate(node, data) {
          this.resetTemp()
          this.tempData.parentName = data.label;
          this.tempData.parentId = data.id;
          this.handlePermissionStatus.show = true
          this.optionFlag = "add"
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
        , handleUpdate(node, data) {
          this.handlePermissionStatus.loading = true;
          this.optionFlag = "update";
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          });
          getUpmsPermission({id:data.id}).then(response => {
            if (response.result) {
              this.tempData = response.data;
              this.handlePermissionStatus.show = true;
              setTimeout(() => {
                this.handlePermissionStatus.loading = false
              }, 0.5 * 1000)
            }
            else {
              Message({
                message: response.msg,
                type: 'error',
                duration: 5 * 1000
              })
            }
          });
        }
        , handleDelete(node, data) {
          if (node.childNodes.length > 0) {
            Message({
              message: "“" + node.label + "” 存在子权限，无法删除!",
              type: 'error',
              duration: 5 * 1000
            })
          }
          else {
            delUpmsPermission({id:data.id, version:data.version}).then(response => {
              if (response.result) {
                Message({
                  message: response.msg,
                  type: 'success',
                  duration: 5 * 1000
                })
              }
              this.getList();
            })
          }

        }
        , resetTemp() {
          this.tempData = {
          systemId:null,
          permissionName:null,
          permissionCode:null,
          parentId:null,
          icon:null,
          url:null,
          type:null,
          description:null,
          valid:null,
          deleted:null,
          version:null,
          sort:null,
          createTime:null,
          updateTime:null,
          createUser:null,
          updateUser:null,
          }
          this.optionFlag = null
        }
        , createData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              addUpmsPermission(this.tempData).then(response => {
                this.dialogFormVisible = false
                if (response.result) {
                  Message({
                    message: response.msg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                }
                this.handlePermissionStatus.show=false;
                this.getList();
              })
            }
          })
        }
        , updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              editUpmsPermission(this.tempData).then(response => {
                this.dialogFormVisible = false
                if (response.result) {
                  Message({
                    message: response.msg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                }
                this.getList();
              })
            }
          })
        }
        , getList() {
          this.handlePermissionStatus.treeLoading = true
          treePermission().then(response => {
            this.permissionTreeNode[0].children = response.data.children
            setTimeout(() => {
              this.handlePermissionStatus.treeLoading = false
            }, 0.5 * 1000)
          })
        }
      }
    }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
